<template>
  <div class="header">
    <el-row style="padding: 50px 36px">
      <el-col :span="18">
        <div class="c-header-title">二航局中控平台</div>
      </el-col>
      <el-col :span="6">
        <div class="c-header-block">
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="2019-06-30"
            end-placeholder="2019-07-13"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
        </div>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="4">
        <div class="grid-content bg-purple c-header-position">
          <div
            v-for="(v, index) in navList"
            :key="index"
            @click="handleClick(v.path)"
            :class="{ whiteClass: index == whiteIndez }"
          >
            <div
              class="c-header-item-border c-header-label"
              :class="v == index ? 'active' : ''"
            ></div>
            <div class="c-header-item-nav c-header-colors">{{ v.label }}</div>
          </div>
        </div>
      </el-col>
      <el-col :span="18">
        <div class="grid-content bg-purple">
          <router-view></router-view>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import HeadRouter from "@/uilts/uilts";

export default {
  data() {
    return {
      value2: "",
      whiteIndez: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      navList: [
        {
          label: "分子公司授信",
          path: "/molecular",
          state: "",
        },
        {
          label: "到期日历",
          path: "/calendar",
          state: "",
        },
        {
          label: "投放量",
          path: "/putin",
          state: "",
        },
        {
          label: "累计数据统计",
          path: "/accumulated",
          state: "",
        },
        {
          label: "融资成本",
          path: "/financing",
          state: "",
        },
        {
          label: "流动贷款",
          path: "/loans",
          state: "",
        },
        {
          label: "保函",
          path: "/fuarantee",
          state: "",
        },
        {
          label: "票据",
          path: "/bill",
          state: "",
        },
        {
          label: "债卷",
          path: "/bonds",
          state: "",
        },
        {
          label: "内部折借",
          path: "/interior",
          state: "",
        },
      ],
    };
  },
  methods: {
    handleClick(path) {
      const that = this;
      const data = {};
      HeadRouter(path, data, that);
    },
  },
};
</script>

<style scoped>
.c-header-title {
  font-size: 36px;
  color: #43dce9;
  letter-spacing: 5px;
}
.c-header-block {
  float: right;
}
.c-header-position {
  position: relative;
}
.c-header-item-border {
  border: 1px solid #1a5469;
  width: 200px;
  height: 50px;
  margin-bottom: 10px;
}
.c-header-item-nav {
  position: absolute;
  left: 25%;
  line-height: 0px;
  margin-top: -35px;
}
.whiteClass {
  color: white;
  background: #0d4053;
  overflow: hidden;
  width: 202px;
  height: 50px;
  /* margin: 10px; */
}
.c-header-item-nav:hover {
  color: white;
}
</style>